<script context="module">
	import dayjs from "dayjs";
	export async function preload(page, session) {
    if (!session.user) {
      this.error(403, "对不起，请登录之后再查看本页面！");
      return;
    }
		const date = new Date(), y = date.getFullYear(), m = date.getMonth();
    const firstDay = new Date(y, m, 1);
    const lastDay = new Date(y, m + 1, 0);
		const start = dayjs(firstDay).format('YYYY-MM-DD');
		const end = dayjs(lastDay).format('YYYY-MM-DD');
		const response = await Promise.all([
      this.fetch(`/api2/cash?page=1&limit=24&start=${start}&end=${end}`),
			this.fetch('/api2/product?page=1&limit=24'),
			this.fetch('/api2/customer?page=1&limit=24'),
    ]);
		const cash = await response[0].json();
    const products = await response[1].json();
		const customers = await response[2].json();
    return { cash: cash, products, customers, user: session.user };
  }
</script>

<script>
	import { goto, stores } from "@sapper/app";
	import config from "./_config";
	import relativeTime from "dayjs/plugin/relativeTime";
  import "dayjs/locale/zh-cn";
	export let cash;
	export let products;
	export let customers;
	let theIn = 0;
	let out = 0;
	dayjs.extend(relativeTime);
  dayjs.locale("zh-cn");
	$: {
		for (let index = 0; index < cash.cash.length; index++) {
			const theCash = cash.cash[index];
			if(theCash.type=='in') {
				theIn += theCash.amount;
			} else {
				out += theCash.amount;
			}
		}
	}
</script>

<svelte:head>
	<title
		>欢迎光临记账、客户管理系统</title
	>
</svelte:head>

<div class="content">
	<div class="row">
		<div class="col-md-6">
			<div class="card shadow mb-4">
				<div class="card-body">
					<p>本月支出：{out}</p>
					<p>本月收入：{theIn}</p>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card shadow mb-4">
				<div class="card-body">
					<p>商品数：{products.counts}</p>
					<p>顾客数：{customers.counts}</p>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card shadow mb-4">
				<div class="card-header">交易明细</div>
				<div class="card-body">
					<table class="table table-hover">
						<thead>
							<tr>
								<th scope="col">类型</th>
								<th scope="col">资金</th>
								<th scope="col">备注</th>
								<th scope="col">交易日期</th>
							</tr>
						</thead>
						<tbody>
							{#each cash.cash as theCash}
								<tr>
									<td>{theCash.type=='in'?'收入':'支出'}</td>
									<td>{theCash.amount}</td>
									<td>{theCash.description || '无备注'}</td>
									<td>{dayjs().from(dayjs(theCash.meta.createAt))}</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card shadow mb-4">
				<div class="card-header">商品库存</div>
				<div class="card-body">
					<table class="table table-hover">
						<thead>
							<tr>
								<th scope="col">产品名称</th>
								<th scope="col">分类</th>
								<th scope="col">数量</th>
								<th scope="col">创建人</th>
								<th scope="col">创建日期</th>
							</tr>
						</thead>
						<tbody>
							{#each products.products as product}
								<tr>
									<td>{product.title}</td>
									<td>{product.category.title}</td>
									<td>{product.counts}</td>
									<td>{product.creator.name}</td>
									<td>{dayjs().from(dayjs(product.meta.createAt))}</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
</style>
